import React, { Component } from "react";
import { connect } from "react-redux";
import SearchBar from '../../components/searchBar/SearchBar'

import {
  StyleSheet,
  View,
  Text,
  FlatList,
  TouchableOpacity
} from "react-native";
import HeaderDefault from "../../components/header/HeaderDefault";
import { theme_app, theme_text } from "../../utils/appTheme";
import { Empty } from "../../components/Empty/Empty";
import {
  getOxygenTourRecByDate,
  getInfusionTourRecByDate,
  getNormalTourRecByDate
} from "../../netServer/patrol";
import { dateTransform } from "../../utils/utils_date";



class PatorRecord extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recordList: [],
      isFresh: false
    };

    this.searchStr = '';

  }

  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        backBtnOnPress={navigation.goBack}
        title={navigation.state.params.navTitle}
      />
    )
  });

  componentDidMount() {
    this._loadReordsList();
  }
  _loadReordsList = () => {
    let { navTitle } = this.props.navigation.state.params;

    let params = new FormData();
    let { user_id } = this.props.user_info;
    params.append("userId", user_id);

    let nowDate = new Date();
    let start_dat = dateTransform(nowDate, 'yyyy-MM-dd') + ' 00:00:00';
    let end_dat = dateTransform(nowDate, 'yyyy-MM-dd') + ' 23:59:59';

    params.append("startTime", start_dat);
    params.append("endTime", end_dat);
    params.append("concatQuery", this.searchStr);
    params.append("pageSize", 500);
    params.append("currentPage", 1);


    if (navTitle === "吸氧巡视记录") {
      getOxygenTourRecByDate(params, this._opionCallBack);
    } else if (navTitle === "常规巡视记录") {
      getNormalTourRecByDate(params, this._opionCallBack);
    } else if (navTitle === "输液巡视记录") {

      getInfusionTourRecByDate(params, this._opionCallBack);
    }
  };

  // 执行记录成功回调
  _opionCallBack = resp => {
    let { code, data = {}, msg } = resp;


    if (code == 0) {
      this.setState({
        recordList: data.data,
        isFresh: false
      });
    } else {
      this.setState({
        recordList: [],
        isFresh: false
      });
    }
  };

  _submitSearch = (searchText) => {
    this.searchStr = searchText;
    this._refreshData();

  }

  _refreshData = () => {
    this.setState({
      isFresh: true
    });
    this._loadReordsList();
  };

  _ListEmptyComponent = () => {
    return <Empty titleStr="暂未找到相关巡视记录" />;
  };

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: "#efefef" }} />;
  };

  _keyExtractor = (item, index) => index + "reordlist";

  _renderItem = ({ item }) => {


    let { ptName, bed_no, create_at, createUser, inhosp_no } = item;

    return (
      <View
        style={{
          width: screenWidth,
          height: 60,
          backgroundColor: "white",
          flexDirection: "row"
        }}
      >
        <View style={styles.eq_titleStyle}>
          <Text>{ptName}</Text>
        </View>
        <View style={styles.eq_titleStyle}>
          <Text>{bed_no}</Text>
        </View>

        <View style={styles.eq_titleStyle}>
          <Text>{inhosp_no}</Text>
        </View>

        <View style={styles.eq_titleStyle}>
          <Text>{create_at}</Text>
        </View>
        <View style={styles.eq_titleStyle}>
          <Text>{createUser}</Text>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {/* <View style={{ flex: 1 }} /> */}
        <SearchBar placeholderStr='输入姓名、床号、疗养号搜索' submitSearch={this._submitSearch} />

        <View
          style={{
            width: screenWidth,
            height: 45,
            flexDirection: "row",
            backgroundColor: "white",
            borderBottomColor: "#efefef",
            borderBottomWidth: 1
          }}
        >
          <View style={styles.eq_titleStyle}>
            <Text>姓名</Text>
          </View>
          <View style={styles.eq_titleStyle}>
            <Text>床号</Text>
          </View>
          <View style={styles.eq_titleStyle}>
            <Text>疗养号</Text>
          </View>
          <View style={styles.eq_titleStyle}>
            <Text>巡视时间</Text>
          </View>
          <View style={styles.eq_titleStyle}>
            <Text>巡视人</Text>
          </View>
        </View>

        <FlatList
          refreshing={this.state.isFresh}
          onRefresh={this._refreshData}
          style={{ flex: 1 }}
          ListEmptyComponent={this._ListEmptyComponent}
          ItemSeparatorComponent={this._separator}
          data={this.state.recordList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: "row",
    alignItems: "center"
  },
  eq_titleStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

function select(store) {
  return { user_info: store.userInfo.user_info };
}
export default connect(select)(PatorRecord);
